{% extends 'base.html' %}

{% block title %}
    Login | 
{% endblock title %}

{% block content %}
    <div class="px-[10vw] sm:px-[20vw] md:px-[30vw]">
        <h1 class="font-bold text-3xl text-[--text-minor] mb-5 text-center">Login</h1>
        <form action="#"
            hx-post="{% url 'login_view' %}"
            hx-swap="none"
            class="flex flex-col space-y-5 mb-2">
            <span class="flex flex-col space-y-3">
                <label for="email">Email</label>
                <input required type="email" name="email" id="email" class="text-sm border-[--secondary] border-2 rounded-lg block w-full p-2.5 bg-[--background-secondary] placeholder-gray-600 hover:cursor-text disabled:cursor-not-allowed disabled:text-gray-60">    
            </span>
            <span class="flex flex-col space-y-3">
                <label for="password">Password</label>
                <input required type="password" name="password" id="password" class="text-sm border-[--secondary] border-2 rounded-lg block w-full p-2.5 bg-[--background-secondary] placeholder-gray-600 hover:cursor-text disabled:cursor-not-allowed disabled:text-gray-60">
            </span>
            <button type="submit" class="p-4 rounded-lg bg-[--primary] hover:origin-top text-[--text-dark] hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">Login</button>
        </form>
        Don't have account? <a href="{% url 'register_view' %}" class="font-bold text-[--accent]">Register now!</a>
    </div>
{% endblock content %}